import React, { useState, useEffect } from 'react'
import loadingImg from '@/assets/loading.gif'
import errorImg from '@/assets/error.jpeg'
import style from './loadImg.module.scss'

const LoadImg = props => {
  const [url, setUrl] = useState(loadingImg)

  useEffect(() => {
    let img = new Image()
    img.src = props.url
    img.onload = () => {
      // console.log('图片加载成功了', img)
      setUrl(props.url)
    }
    img.onerror = () => {
      // console.log('图片加载失败了', img)
      setUrl(errorImg)
    }
  }, [])

  return (
    <div className={`${style.load} ${props.className}`}>
      <img src={url} alt="" />
    </div>
  )
}

export default LoadImg
